<template>
  <div>
    <section class="banner">
      <div class="slider">
        <div class="slide" v-for="(slide, index) in slides" :key="index" v-show="currentIndex === index">
          <img :src="slide.image" :alt="slide.title">
          <div class="left-info">
            <div class="penetrte-blur">
              <h1>{{ slide.titleFirst }}</h1>
            </div>
            <div class="content">
              <h3>{{ slide.number }}. {{ slide.title }}</h3>
              <p>{{ slide.description }}</p>
              <a href="#" class="btn">More</a>
            </div>
          </div>
          <div class="right-info">
            <h1>{{ slide.titleSecond }}</h1>
            <h3>{{ slide.subtitle }}</h3>
          </div>
        </div>
      </div>
      <div class="navigation">
        <span class="prev" @click="prevSlide">
          <i>&lt;</i>
        </span>
        <span class="next" @click="nextSlide">
          <i>&gt;</i>
        </span>
      </div>
    </section>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'

const currentIndex = ref(0)

const slides = ref([
  {
    image: '/image/brazil.jpg',
    titleFirst: 'Chi',
    titleSecond: 'na',
    number: '01',
    title: 'China Forest Tour',
    subtitle: 'Forest',
    description: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor enim vitae soluta voluptates tenetur itaque voluptatem ducimus sequi, accusamus aperiam sint quas.'
  },
  {
    image: '/image/japan.jpg', // 请确保添加这个图片
    titleFirst: 'Ja',
    titleSecond: 'pan',
    number: '02',
    title: 'Japan Mountain Tour',
    subtitle: 'Mountain',
    description: '日本的山岳之旅带您领略富士山的壮丽景色，体验日本独特的自然风光和文化底蕴。'
  },
  {
    image: '/image/serbia.jpg',
    titleFirst: 'Ko',
    titleSecond: 're',
    number: '03',
    title: 'Korea Forest Tour',
    subtitle: 'Forest',
    description: '韩国的森林之旅 allows you to explore the natural beauty of the Korean countryside, including the beautiful forests, rivers, and mountains.'
  },
  {
    image: '/image/africa.jpg',
    titleFirst: 'Th',
    titleSecond: 'ai',
    number: '04',
    title: 'Thailand Forest Tour',
    subtitle: 'Forest',
    description: '泰国的森林之旅 allows you to explore the natural beauty of the Thai countryside, including the beautiful forests, rivers, and mountains.'
  },
])

const autoPlayInterval = ref(null) // 添加定时器引用

// 自动播放函数
const startAutoPlay = () => {
  autoPlayInterval.value = setInterval(() => {
    nextSlide()
  }, 2000)
}

// 停止自动播放
const stopAutoPlay = () => {
  if (autoPlayInterval.value) {
    clearInterval(autoPlayInterval.value)
    autoPlayInterval.value = null
  }
}

// 在组件挂载时启动自动播放
onMounted(() => {
  startAutoPlay()
})

// 在组件卸载时清除定时器
onUnmounted(() => {
  stopAutoPlay()
})

// 修改导航按钮点击处理函数，点击后重置自动播放
const nextSlide = () => {
  currentIndex.value = (currentIndex.value + 1) % slides.value.length
  stopAutoPlay()
  startAutoPlay()
}

const prevSlide = () => {
  currentIndex.value = currentIndex.value === 0
    ? slides.value.length - 1
    : currentIndex.value - 1
  stopAutoPlay()
  startAutoPlay()
}

</script>

<style lang="scss" scoped>
.banner {
  width: 100%;
  height: calc(100vh); // 改为固定高度
  overflow: hidden; // 添加这行防止滚动

  .slider {
    width: 100%;
    height: 100%;

    .slide {
      width: 100%;
      height: 100%;

      img {
        width: 100%;
        height: 100vh; // 改为固定高度
        object-fit: cover;
        object-position: center;
      }

      .left-info {
        position: absolute;
        top: 0;
        left: 0;
        width: 50%;
        height: 100%;

        .penetrte-blur {
          position: absolute;
          width: 100%;
          height: 100%;
          background-color: rgba(255, 255, 255, .1);
          backdrop-filter: blur(15px);
          display: flex;
          justify-content: flex-end;
          align-items: center;
          -webkit-mask: linear-gradient(#000 0 0),
            linear-gradient(to right, #000 0 0);
          -webkit-mask-clip: text, padding-box;
          -webkit-mask-composite: xor;

          h1 {
            font-size: 250px;
            font-weight: 600;
            text-shadow: 0 0 10px rgba(255, 255, 255, .8);
          }

        }

        .content {
          position: absolute;
          bottom: 8%;
          left: 8%;
          color: #fff;

          h3 {
            font-size: 20px;
          }

          p {
            font-size: 16px;
            margin: 10px 0 15px;
          }

          .btn {
            display: inline-block;
            padding: 13px 28px;
            background: #fff;
            border: 2px solid #fff;
            border-radius: 6px;
            box-shadow: 0 0 10px rgb(0, 0, 0, .1);
            font-size: 16px;
            color: #444;
            text-decoration: none;
            font-weight: 600;
            transition: .5s;
          }

          .btn:hover {
            background: transparent;
            color: #fff;
          }
        }
      }

      .right-info {
        position: absolute;
        top: 0;
        right: 0;
        width: 50%;
        height: 100%;
        display: flex;
        align-items: center;

        h1 {
          font-size: 250px;
          font-weight: 600;
          color: #fff;
          text-shadow:
            0 1px 0 #ccc,
            0 2px 0 #9c9c9c,
            0 3px 0 #bbb,
            0 4px 0 #b9b9b9,
            0 5px 0 #aaa,
            0 6px 1px rgba(0, 0, 0, .1),
            0 0 5px rgba(0, 0, 0, .1),
            0 1px 3px rgba(0, 0, 0, .3),
            0 3px 5px rgba(0, 0, 0, .2),
            0 5px 10px rgba(0, 0, 0, .25),
            0 10px 10px rgba(0, 0, 0, .2),
            0 20px 20px rgba(0, 0, 0, .15),
          ;
        }

        h3 {
          position: absolute;
          font-size: 80px;
          color: #fff;
          text-shadow: 0 0 10px rgba(0, 0, 0, .5);
          transform: translateY(200%);
          margin-left: 13px;
        }
      }
    }
  }

  .navigation {
    position: absolute;
    bottom: 8%;
    right: 5%;
    z-index: 99;

    span {
      display: inline-block;
      align-items: center;
      justify-content: center;
      width: 50px;
      height: 50px;
      background: transparent;
      border-radius: 6px;
      border: 2px solid #fff;
      box-shadow: 0 0 10px rgba(0, 0, 0, .5);
      cursor: pointer;
      margin-left: 25px;
      transition: .3s;

      i {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 35px; // 稍微调小一点字体大小
        color: #fff;
        font-style: normal;
        line-height: 1; // 添加行高
      }

      &:hover {
        // 悬停效果
        background: #fff;

        i {
          color: #444; // 悬停时箭头变为深色
        }
      }
    }

  }
}
</style>